<template>
  <div class="related-order-box">
    <select-with-user-load
      ref="ipSeriesId"
      v-model="selectItem"
      :loadmore-method="getMengliIpSeries()"
      :style="styleSet"
      placeholder="所属系列"
      value-type="object"
      key-name="id"
      label-name="name"
      extend-class="image"
      filterable
      collapse-tags
      @change="ipSeriesChange" />
  </div>
</template>
<script>
import SelectWithUserLoad from '@/components/Common/selectWithUserLoad';
import { getMengliIpSeries } from '@/api/mengli';
export default {
  name: 'IpSeriesLoad',
  components: { SelectWithUserLoad },
  props: {
    options: { // 选中项， {id: '', name: '' }
      type: Object,
      default: () => {}
    },
    styleSet: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      selectItem: ''
    };
  },
  watch: {
    options(value) {
      this.selectItem = value.ipSeriesId === 0 ? { id: '', name: '' } : value;
    }
  },
  created() {
  },
  methods: {
    /**
     * 获取下拉数据
     */
    // 获取ip系列
    getMengliIpSeries() {
      const a = function(params) {
        return new Promise((resolve, reject) => {
          getMengliIpSeries(params).then(res => {
            const data = res;
            data.data.items.unshift({ id: '', name: '请选择' });
            resolve(data);
          }).catch(err => {
            reject(err);
          });
        });
      };
      return a;
    },
    ipSeriesChange(data) {
      this.$emit('ipSeriesChange', data);
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
